{extend name="base" /}

{block name="content"}
<form class="layui-form" action="" id="searchBox">
    <div class="layui-inline" style="width: 268px;">
        <div class="my-date">
            <span class="my-date-now">今天</span>
            <ul class="my-date-ul">
                <li value="0">今天</li>
                <li value="1">昨天</li>
                <li value="3">最近3天</li>
                <li value="7">最近7天</li>
                <li value="30">最近30天</li>
            </ul>
        </div>
        <input type="text" name="date" value="{$date}" id="date" placeholder="下单时间" autocomplete="off" class="layui-input my-date-input">
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <select name="game_id" id="game_id" lay-filter="game_id" lay-search="">
                <option value="">选择游戏（全部）</option>
                {volist name="$game_data" id="vo"}
                <option value="{$vo.game_id}">{$vo.game_id}：{$vo.game_name}</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <input type="text" name="my_user_id" value="" id="my_user_id" placeholder="用户ID/登录名称" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-inline">
        <input type="text" name="role_id" value="" id="role_id" placeholder="角色ID/角色名称" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-inline">
        <input type="text" name="my_order_id" value="" id="my_order_id" placeholder="米娱订单号" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-inline">
        <input type="text" name="my_order_id" value="" id="cp_order_id" placeholder="CP订单号" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-inline" style="width:130px;">
        <select name="pay_result" id="pay_result" lay-filter="pay_result">
            <option value="">全部（支付通知）</option>
            <option value="1" selected>支付到账</option>
            <option value="2">支付未到账</option>
        </select>
    </div>
    <div class="layui-inline" style="width:130px;">
        <select name="game_result" id="game_result" lay-filter="game_result">
            <option value="">全部（游戏通知）</option>
            <option value="1" selected>游戏到账</option>
            <option value="2">游戏未到账</option>
        </select>
    </div>
    <div class="layui-inline" style="width:130px;">
        <select name="debug" id="debug" lay-filter="debug">
            <option value="">全部（测试数据）</option>
            <option value="1">测试数据</option>
            <option value="2" selected>非测试数据</option>
        </select>
    </div>
    <div class="layui-inline">
        <a href="javascript:;" class="layui-btn searchBtn my-btn">搜索</a>
    </div>
</form>

<table id="tableBox" lay-filter="tableBox"></table>

<script type="text/html" id="gameIdTpl">
    <div style="border-bottom: 1px solid #ddd; height:32px; line-height: 32px;">
        {{ d.game_name }}
    </div>
    <div>
        {{ d.game_id }}
    </div>
</script>

<script type="text/html" id="myUserIdTpl">
    <div style="border-bottom: 1px solid #ddd; height:32px; line-height: 32px;">
        {{ d.my_user_name }}
    </div>
    <div>
        {{ d.my_user_id }}
    </div>
</script>

<script type="text/html" id="roleIdTpl">
    <div style="border-bottom: 1px solid #ddd; height:32px; line-height: 32px;">
        {{ d.role_name }}
    </div>
    <div>
        {{ d.role_id }}
    </div>
</script>

<script type="text/html" id="serverIdTpl">
    <div style="border-bottom: 1px solid #ddd; height:32px; line-height: 32px;">
        {{ d.server_name }}
    </div>
    <div>
        {{ d.server_id }}
    </div>
</script>

{/block}

{block name="css"}
<style>
    .layui-inline {margin-bottom:5px;}
    #tableBox {margin-top: -5px;}

     table {border-collapse: separate;}
    .layui-table-cell {height: 62px; line-height:62px; padding-left: 10px; padding-right: 10px;}
    td[data-field=game_id] > div {line-height: 28px;}
    td[data-field=reg_cps_id] > div {line-height: 28px;}
    td[data-field=my_user_id] > div {line-height: 28px;}
    td[data-field=role_id] > div {line-height: 28px;}
    td[data-field=server_id] > div {line-height: 28px;}
    thead .layui-table-cell {line-height: 28px; height: 28px;}

    /*自定义日期*/
    .my-date {border: 1px solid #ddd; padding-left: 10px; line-height: 36px;float: left; width: 70px; border-right: none; cursor: pointer; position: relative;}
    .my-date-ul {display: none; border: 1px solid #ddd; background: #fff; z-index: 9999; position: absolute; left: -1px; color:#333; width: 80px; line-height: 36px;}
    .my-date-ul li {padding-left: 10px;}
    .my-date-ul li:hover {background: #5FB878; color:#fff;}
    .my-date-input {float: left; width: 186px; border-top-left-radius: 0; border-bottom-left-radius: 0;}
</style>
{/block}

{block name="js"}
<script>
    layui.use(['form', 'laydate', 'table', 'layer'], function(){
        var table = layui.table
            ,$ = layui.$
            ,laydate = layui.laydate
            ,load = layer.load()
            ,active = {
                reload: function (date) {
                    var dateVal = '';
                    if(date !== undefined){
                        dateVal = date;
                    }else{
                        dateVal = $('#date').val();
                    }
                    var jsonObj = {
                        "date": dateVal
                        ,"my_user_id": $('#my_user_id').val()
                        ,"role_id": $('#role_id').val()
                        ,"server_id": $('#server_id').val()
                        ,"my_order_id": $('#my_order_id').val()
                        ,"cp_order_id": $('#cp_order_id').val()
                        ,"pay_order_id": $('#pay_order_id').val()
                        ,"debug": $('#debug').val()
                        ,"pay_result": $('#pay_result').val()
                        ,"game_result": $('#game_result').val()
                        ,"game_id": $('#game_id').val()
                    };

                    table.reload('tableId', {
                        page: {curr: 1}
                        ,where: jsonObj
                        ,height: 'full-80'
                    })
                },
            };

        //自定义日期
        $('body').on('click', '.my-date-ul li', function(){
            var val = $(this).attr('value')
                ,html = $(this).html()
                ,dateStr = '';

            switch (val){
                case "0": dateStr = getMyDate(0) + ' - ' + getMyDate(0); break; //今天
                case "1": dateStr = getMyDate(1) + ' - ' + getMyDate(1); break; //昨天
                case "3": dateStr = getMyDate(2) + ' - ' + getMyDate(0); break; //最近3天
                case "7": dateStr = getMyDate(6) + ' - ' + getMyDate(0); break; //最近7天
                case "30": dateStr = getMyDate(30) + ' - ' + getMyDate(0); break; //最近30天
            }
            $('.my-date-now').html(html);
            $('#date').val(dateStr);
            $('.my-date-ul').stop().hide();

            load = layer.load();
            active.reload(dateStr);
            return false;
        })
        function getMyDate(num){
            var date = new Date();
            date.setDate(date.getDate()-num);
            var m = (date.getMonth() + 1) >= 10 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1);
            var d = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate();
            return date.getFullYear()+"-"+m+"-"+ d;
        }
        $('.my-date').hover(function(){
            $('.my-date-ul').stop().show();
        }, function(){
            $('.my-date-ul').stop().hide();
        });

        table.render({
            elem: '#tableBox'
            ,height: 'full-80'
            ,url: '{:url("DataOrder/index")}'
            ,where: {date:$('#date').val(), pay_result:$('#pay_result').val(), game_result:$('#game_result').val(), debug:$('#debug').val()}
            ,page: true
            ,limit: 40
            ,limits: [20,40,60,80]
            ,id: 'tableId'
            ,done: function (res, curr, count) {
                $('#total_price').html(res.params);
                layer.close(load);
            }
            ,cols: [[
                {type:'checkbox', fixed: 'left'}
                ,{field:'order_time', title: '下单时间', width: 160, sort:true, fixed: 'left'}
                ,{field:'game_id', title: '充值游戏', width: 140, templet: '#gameIdTpl', fixed: 'left'}
                ,{field:'my_user_id', title: '登录名称', width: 140, templet: '#myUserIdTpl', fixed: 'left'}
                ,{field:'role_id', title: '角色名称', width: 220, templet: '#roleIdTpl', fixed: 'left'}
                ,{field:'server_id', title: '区服名称', width: 140, templet: '#serverIdTpl'}
                ,{field:'my_order_id', title: '米娱单号', width: 160}
                ,{field:'total_price', title: '充值金额', width: 85, sort:true, style:'background-color: #6495ed; color: #fff;'}
                ,{field:'pay_result', title: '充值结果', width: 85, templet: '#payResultTpl'}
                ,{field:'game_result', title: '游戏结果', width: 85, templet: '#gameResultTpl'}
                ,{field:'ratio', title: '充值比例', width: 85}
                ,{field:'pay_time', title: '充值时间', width: 160, sort:true}
                ,{field:'product_name', title: '充值产品', width: 150}
                ,{field:'pay_type', title: '支付方式', width: 100}
                ,{field:'rebate_time', title: '返利时间', width: 150}
                ,{field:'debug', title: '是否测试', width: 100}
            ]]
        });

        //日期
        laydate.render({
            elem: '#date'
            ,type: 'date'
            ,range: true
            ,calendar: true
            ,min: '2016-01-01'
            ,max: 0
            ,done: function(value, date, endDate){
                load = layer.load();
                active.reload(value);
                return false;
            }
        });

        $('#searchBox .searchBtn').on('click', function(){
            load = layer.load();
            active['reload'].call(this);
            return false;
        });
    });
</script>
{/block}
